<template>
  <div style="padding: 20px">
    <el-row>
      <el-col :span="22" :offset="1">
        <el-card>
          <span style="font-size: 32px">联系方式</span>
          <el-divider></el-divider>
          <div>
            <p style="font-size: 18px">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-youxiang"></use>
              </svg>
              Lqm394@126.com（罗全明 教授）
            </p>
            <p style="font-size: 18px">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dizhi"></use>
              </svg>
              重庆市沙坪坝区沙正街174号重庆大学A区第六教学大楼 412 室
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="11" :offset="1">
        <el-card style="margin-top: 50px; width: 45vw">
          <span style="font-size: 32px">地理位置</span>
          <el-divider></el-divider>
          <baidu-map @ready="handler" style="height: 46vh" class="map">
          </baidu-map>
        </el-card>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-card style="margin-top: 50px; width: 39.8vw">
          <span style="font-size: 32px">留言吧</span>
          <el-divider></el-divider>
          <el-form
            :model="guestbookForm"
            :rules="guestbookFormRules"
            ref="guestbookFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="姓名" prop="name">
              <el-input
                type="text"
                v-model="guestbookForm.name"
                placeholder="请输入您的姓名"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                type="email"
                v-model="guestbookForm.email"
                placeholder="请输入您的邮箱"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="单位" prop="inst">
              <el-input
                type="text"
                v-model="guestbookForm.inst"
                placeholder="请输入您的单位"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="留言" prop="book">
              <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 6 }"
                v-model="guestbookForm.book"
                placeholder="请留下您的建议和想法吧！"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('guestbookFormRef')"
                >提交</el-button
              >
              <el-button type="info" @click="resetForm('guestbookFormRef')"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "TestBaiDu",
  data() {
    return {
      guestbookForm: {
        name: null,
        email: null,
        inst: null,
        book: null,
      },
      guestbookFormRules: {
        name: [
          { required: true, message: "请确认您的姓名！", trigger: "blur" },
        ],
        inst: [
          { required: true, message: "请确认您的单位！", trigger: "blur" },
        ],
        book: [{ required: true, message: "留言不能为空！", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (
                /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
                  value
                ) == false
              ) {
                callback(new Error("邮箱格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handler({ BMap, map }) {
      var point = new BMap.Point(106.473039, 29.570672);
      map.centerAndZoom(point, 16);
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 弹跳效果（一直跳动）

      var opts = {
        width: 300, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "重庆大学电气工程学院空间电源实验室", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
        message: "",
      };
      var infoWindow = new BMap.InfoWindow(
        "地址：重庆大学电气工程学院楼421<br>电话：023-65102434<br>e-mail：Lqm394@126.com",
        opts
      ); // 创建信息窗口对象
      marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      });

      // 添加鼠标滚动缩放
      map.enableScrollWheelZoom();
      // 添加缩放平移控件
      map.addControl(new BMap.NavigationControl());
      // 添加比例尺控件
      map.addControl(new BMap.ScaleControl());
      // 添加地图类型控件
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP, BMAP_SATELLITE_MAP],
        })
      );
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$notify({
            title: "成功",
            message: "提交成功！",
            type: "success",
            duration: 4000,
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: "抱歉，提交失败，请重新提交！",
            type: "error",
            duration: 4000,
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.35em;
  fill: currentColor;
  overflow: hidden;
}
</style>

<style>
/* 地图提示信息样式 */

/*地图标题*/
.BMap_bubble_title {
  color: rgb(58, 54, 54);
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  padding-left: 5px;
  padding-top: 5px;
  border-bottom: 1px solid gray;
  background-color: #f3f4f5;
}
/* 消息内容 */
.BMap_bubble_content {
  background-color: white;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 10px;
  color: rgb(83, 80, 80);
  font-size: 14px;
  font-family: "Times New Roman";
}
/* 内容 */
.BMap_pop div:nth-child(9) {
  top: 10px !important;
  border-radius: 7px;
}
.BMap_pop div:nth-child(8) {
  top: 77px !important;
}
/* 左上角删除按键 */
.BMap_pop img {
  top: 18px !important;
  left: 300px !important;
}
.BMap_top {
  display: none;
}
.BMap_bottom {
  display: none;
}
.BMap_center {
  display: none;
}
/* 隐藏边角 */
.BMap_pop div:nth-child(1) div {
  display: none;
}
.BMap_pop div:nth-child(3) {
  display: none;
}
.BMap_pop div:nth-child(7) {
  display: none;
}
</style>
